<template>
  <div>
    <div>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.BorrowType }} </template>
          {{ formData.typeName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.DeviceBorrower }} </template>
          {{
            formData.typeName == "外部借用"
              ? formData.customerName
              : formData.borrowPersonName
          }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.DeviceBorrowTime }} </template>
          {{ formatTime(formData.borrowTime) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            {{ dataList.DeviceBorrowReturnTime }}
          </template>
          {{ formatTime(formData.returnDate) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">{{ dataList.ReasonsOfBorrow }} </template>
          {{ formData.reason }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.Deviceremark }}</template>
          {{ formData.remark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.ActualBorrowTime }} </template>
          {{ formData.actualBorrowTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> {{ dataList.ActualReturnDate }} </template>
          {{ formData.actualReturnDate }}
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.BorrowOfDevice }}</span>
      </el-divider>
      <el-table
        :data="formData.deviceBorrowInfoDtoList"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceClassifyId">
          <template slot-scope="scope">
            {{ scope.row.classifyName }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceSupplierName">
          <template slot-scope="scope">
            {{ scope.row.supplierName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceFactoryNum">
          <template slot-scope="scope">
            {{ scope.row.factoryNum }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.ProBorrowStatus">
          <template slot-scope="scope">
            {{ scope.row.statusName }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en'
              ? dataList.eDeviceStorageAddress
              : dataList.DeviceStorageAddress
          "
        >
          <template slot-scope="scope">
            {{ scope.row.storageAddress }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.IsBorrow">
          <template slot-scope="scope">
            {{ formData.statusId >= 30 ? scope.row.borrowStatusName : "" }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.ReturnOfDevice }}</span>
      </el-divider>
      <el-table
        :data="formData.deviceSendBackDtoList"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        >
        <el-table-column :label="dataList.DeviceNumber">
          <template slot-scope="scope">
            {{ scope.row.num }}
          </template>
        </el-table-column>
        <el-table-column
          :label="
            $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
          "
        >
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DeviceSpecifications">
          <template slot-scope="scope">
            {{ scope.row.specifications }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.DeviceFactoryNum">
          <template slot-scope="scope">
            {{ scope.row.factoryNum }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.DevicePersonResponsibleId">
          <template slot-scope="scope">
            {{ scope.row.personResponsibleName }}
          </template>
        </el-table-column>

        <el-table-column
          :label="
            $i18n.locale === 'en'
              ? dataList.eDeviceStorageAddress
              : dataList.DeviceStorageAddress
          "
        >
          <template slot-scope="scope">
            {{ scope.row.returnAddress }}
          </template>
        </el-table-column>

        <el-table-column :label="dataList.ReturnOfDeviceStatus">
          <template slot-scope="scope">
            {{ formData.statusId >= 30 ? scope.row.returnStatusName : "" }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Deviceremark">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div>
      <el-divider class="el-divider-specail" content-position="left"
        ><span>{{ dataList.EquipmentAndSparepartsList }}</span>
      </el-divider>
      <el-table :data="formData.deviceParts" border style="width: 100%">
        <el-table-column align="center" :label="dataList.Number" width="100">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="name" :label="dataList.Name" />
        <el-table-column
          align="center"
          prop="unit"
          :label="dataList.UnitOfMeasurement"
        />
        <el-table-column
          align="center"
          prop="loanCount"
          :label="dataList.BorrowQuantity"
        />
        <el-table-column
          align="center"
          prop="returnCount"
          :label="dataList.ReturnQuantity"
        />
        <el-table-column
          align="center"
          prop="remark"
          :label="dataList.Deviceremark"
        />
      </el-table>
    </div>
  </div>
</template>

<script>
import { formatTime } from "../../utils/time";
import { get } from "../../api/DeviceBorrow.js";
import { GetListNoPage } from "../../api/DevicePartsLoan";
export default {
  name: "DeviceBorrowView",
  components: {},
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      formData: {
        borrowTime: null,
        id: 0,
        num: "",
        type: 0,
        typeName: "",
        statusId: 0,
        statusName: "",
        reason: "",
        returnDate: null,
        borrowPersonId: this.$store.getters.currentUserId,
        borrowPersonName: "",
        creatorId: 0,
        creatorName: "",
        remark: "",
      },
      formRules: {},
      list: [],
      sendBackList: [],
      loading: true,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  watch: {},
  created() {
    this.loading = false;
    this.get();
  },
  methods: {
    formatTime,
    get() {
      get({ id: this.id })
        .then((res) => {
          this.formData = res.data;
          GetListNoPage({ deviceBorrowId: this.id }).then((res) => {
            this.formData.deviceParts = res.data;
          });
        })
        .catch((res) => {});
    },
  },
};
</script>
<style scoped></style>
